<template>
  <div class="res-show">
    <box title="成果展示">
      <div class="main">
        <img
          src="~@/assets/concreteScreen/res_show_head.png"
          class="img"
          alt=""
        />
        <!-- 期刊轮播图 -->
        <rotate :data="list1"></rotate>
        <!-- 软著轮播图 -->
        <rotate :data="list2"></rotate>
      </div>
    </box>
  </div>
</template>
  <script>
import box from "../box.vue";
import rotate from "./rotate.vue";

import qk1 from "@/assets/concreteScreen/qk1.png";
import qk2 from "@/assets/concreteScreen/qk2.png";
import qk3 from "@/assets/concreteScreen/qk3.png";

import rz1 from "@/assets/concreteScreen/rz1.jpg";
import rz2 from "@/assets/concreteScreen/rz2.jpg";
import rz3 from "@/assets/concreteScreen/rz3.jpg";

export default {
  components: {
    box,
    rotate,
  },
  data() {
    return {
      list1: [qk1, qk2, qk3],
      list2: [rz1, rz2, rz3],
      currIdx: 1,
    };
  },
};
</script>
  <style scoped lang='scss'>
.res-show {
  width: vw(606px);
  height: vh(598px);
  border: 1px solid rgba(66, 167, 182, 0.5);
  color: #fff;
  overflow: hidden;
  .main {
    padding-top: vh(20px);
    display: flex;
    flex-direction: column;
    .img {
      height: vh(76px);
      margin: 0 auto;
      margin-bottom: vh(22px);
    }
  }
}
</style>
  